<template>
  <div class="dashboard-container">
    <!-- 侧边栏 -->
    <Sidebar
      :isSidebarCollapsed="isSidebarCollapsed"
      @toggle-sidebar="toggleSidebar"
      @new-chat="handleNewChat"
      @logout="handleLogout"
    />

    <!-- 主内容区域 -->
    <div class="main-content" :class="{ 'main-content-expanded': isSidebarCollapsed }">
      <!-- 页面切换 -->
      <div>
        <router-view class="router-view-container"></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import Sidebar from '@/components/Sidebar.vue'

const router = useRouter()

// 响应式数据
const isSidebarCollapsed = ref(false)

// 切换侧边栏
const toggleSidebar = () => {
  isSidebarCollapsed.value = !isSidebarCollapsed.value
}

// 处理新会话事件
const handleNewChat = () => {
  router.push({ path: '/dashboard/chat' });
  localStorage.removeItem('user_uuid'); // 清除用户ID以开始新会话
};

// 处理退出登录事件
const handleLogout = () => {
  localStorage.removeItem('isLoggedIn');
  localStorage.removeItem('userInfo');
  localStorage.removeItem('rememberMe');
  router.push('/login');
};

// 组件挂载时检查本地存储的侧边栏状态
onMounted(() => {
  console.log('Dashboard component mounted');
  const savedState = localStorage.getItem('sidebar_collapsed');
  if (savedState !== null) {
    isSidebarCollapsed.value = JSON.parse(savedState);
  }
});

onUnmounted(() => {
  console.log('Dashboard component unmounted');
});

// 监听侧边栏状态变化并保存到本地存储
watch(isSidebarCollapsed, (newValue) => {
  localStorage.setItem('sidebar_collapsed', JSON.stringify(newValue));
});
</script>

<style scoped>
.dashboard-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
  transition: margin-left 0.3s ease;
  overflow: hidden;
}

.main-content-expanded {
  margin-left: 0;
}

/* 确保 router-view 能够填充其父容器 */
.main-content > .router-view-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    margin-left: 0;
  }

  .main-content-expanded {
    margin-left: 0;
  }
}

/* 全局样式重置 */
:deep(.el-menu) {
  border-right: none;
}

:deep(.el-menu--collapse) {
  width: 64px;
}

:deep(.el-menu-item) {
  border-radius: 8px;
  margin: 2px 8px;
}

/* 页面切换动画 */
.page-content {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 